<script setup>
import {reactive, ref} from "vue";
let isAgree = ref(false)
let hobbies = ref([])
</script>

<template>
  <input type="checkbox" id="agree" v-model="isAgree"><label for="agree">同意协议</label>
  <h2>您选择的是: {{isAgree}}</h2>
  <button :disabled="!isAgree">下一步</button>

  <hr>
  <input type="checkbox" value="篮球" v-model="hobbies" id="basketball"><label for="basketball">篮球</label>
  <input type="checkbox" value="足球" v-model="hobbies" id="footbal"><label for="footbal">足球</label>
  <input type="checkbox" value="乒乓球" v-model="hobbies" id="pingpang"><label for="pingpang">乒乓球</label>
  <input type="checkbox" value="羽毛球" v-model="hobbies" id="badminton"><label for="badminton">羽毛球</label>
  <h2>您的爱好是: {{hobbies}}</h2>
</template>

<style scoped>

</style>